Shaun Gorneau last won the day on
Shaun Gorneau had the most liked content!
Shaun Gorneau
Moderators-
Posts
837 -
Joined
-
Last visited
-
Days Won
23
Shaun Gorneau last won the day on
Shaun Gorneau had the most liked content!
About Shaun Gorneau
- Birthday May 31
Contact Methods
- Personal Website
Profile Information
-
Location
Hartford, CT
Recent Profile Visitors
10,749 profile views
Shaun Gorneau's Achievements
-
Shaun Gorneau started following Pin element to the bottom of another element , Better framework for GSAP page transitions - Next or Nuxt? , Structuring massive HTML? and 5 others
-
Better framework for GSAP page transitions - Next or Nuxt?
Shaun Gorneau replied to JLernDesign's topic in GSAP
Hi @JLernDesign, Have you looked into Barba.js along with its router plugin? -
I think maybe you're conflating two separate ideologies, but that is understandable. GSAP, at its core, is made to tween element property values (e.g. x, y, opacity, rotation, scale, etc.) between numerical values, and to manage sequences of tweens. That's sounds simple, but it's powerful! In essence, it can bring a web page to life; any/all of its elements at defined and calculated times, and at defined and calculated locations ... based on user interaction or all on its own. You can use GSAP (to tween out current page elements) in combination with your own custom JS to load remote page content, swap it in to the current page, change the browser's URL, and then again use GSAP to tween in the new elements. Or an logical sequence of tween current out, remote load, tween new in; e.g. load remote content into a local container and do simultaneous tween out/in. Barba.js is made to handle the transition states from one page to the other without a page reload in combination with an animation library ... for which I would highly recommend GSAP! From the Barba.js Docs Animation The important part for a good transition is animation. As Barba is not an animation library, you will need to import one in order to animate elements on the interface to create your transition. Have a look at the Barba.js docs, I think it's exactly what you're looking for. Shaun
-
I think what you’re looking for is https://barba.js.org
-
Upgrade request for Osublake's fine header code example
Shaun Gorneau replied to violacase's topic in GSAP
Hi @violacase, Here it is with GSAP 3 syntax. https://codepen.io/sgorneau/pen/abjmzvW Happy New Year! -
Draggable, programmatically "drag" to a position
Shaun Gorneau replied to Shaun Gorneau's topic in GSAP
LOL, no! ? I was just wondering if the was an under-the-hood (undocumented) method -
So, I'm using Draggable to move around a map that is larger than the viewport and bound to a container. That works perfectly. I have hotspots on the map that reveal info cards. When I click a hotspot, I would like to programmatically perform a drag as if I manually dragged the map from the "mousedown point" to the center of the screen. .to() works fine but doesn't respect the Draggable bounds (for obvious reasons). Is there a way to pass coordinates to a Draggable method such that it respects everything about the Draggable instance (bounds, inertia, etc.)? Thanks Superheros!
-
Hi @noesiscsd, The problem I see here is that two tweens are fighting. Because you've already offset the content that needs to move from "off canvas" to the left, you only have to move it to 0, and then repeat that process. Because we're using a set() here ( rather than a fromTo() ), you'll want to repeat the timeline, not just the tween. Also, due to margins and padding, there is a skip ... so I added a buffer to the x value. https://codepen.io/sgorneau/pen/VwrVPbj?editors=0010 Hope this helps! Shaun
-
Hi @aleangelico, Yes absolutely. But I'm unsure what you're trying to achieve ... you have what appears to be conflicting stuff going on. Here is an example of properties being tweened during the duration of a longer tween. https://codepen.io/sgorneau/pen/rNYprdo?editors=0010
-
Hi @Jay George P, I'm wondering what you're testing on, because it's very smooth here.
-
Hi @fionchadd, I don't see anything wrong with multiple triggers so long as, like your second example, you can wrap it in a loop to build it out for you. Your second example is very close, the only thing was you were not adding the necessary pixel offsets to the `start:` as you did in your first example. This should do it (plus it's a bit simplified). https://codepen.io/sgorneau/pen/WNXXKVY?editors=0010 Hope this helps! Shaun
-
Pin section flickering with Scrolltrigger and smooth-scrollbar
Shaun Gorneau replied to kosmo's topic in GSAP
Any chance you could send a URL to the project? Even if in a private message. I have a feeling this is rubber banding in Mac OS ... are you testing this on a Mac and, if so, which browser(s)? -
You're welcome!
-
Hi @Nwekar, Here is a great tutorial on how to use text as a mask. https://css-tricks.com/how-to-do-knockout-text/
- 1 reply
-
- 2
-
Hi @initium, Moving an image from the bottom can be handled by translating the image on the Y axis from either off below (meaning the height of the viewable area) the viewable area to 0 or on the viewable area (0) to off the top (minus the height of the viewable area). Here is a verbose example to show you what I mean. https://codepen.io/sgorneau/pen/oNoodpo?editors=0010 In a practical execution you'd want to compute things like the viewable area height and wrap the timeline buildout in logic to accommodate any number of slides and any variation on height/width. Hope this helps! Shaun